<template>
  <div class="goods-order-details">
    <div class="top" v-show="info.buied_status == '1'">状态：待发货</div>
    <div class="top" v-show="info.buied_status == '2'">状态：已发货</div>
    <div class="item">
      <div class="goods" v-for="(item, index) in goods" :key="index">
        <div class="img">
          <img :src="item.img">
        </div>
        <div class="title">
          <p class="tip">{{item.title}}</p>
          <p class="attr">规格: {{item.guige}}</p>
          <p class="price">¥{{item.price}} <span class="num">x{{item.num}}</span></p>
        </div>
      </div>
      <p class="address">配送地址 : {{info.name}} {{info.prov_city_area}} {{info.address}}</p>
    </div>
    <div class="white">
      <div class="goods-all">
        <span class="all-title">支付方式</span>
        <span class="all-price">微信支付</span>
      </div>
      <div class="goods-all">
        <span class="all-title">订单编号</span>
        <span class="all-price">{{info.order_no}}</span>
      </div>
      <div class="goods-all">
        <span class="all-title">创建时间</span>
        <span class="all-price">{{info.create_time | formatDate}}</span>
      </div>
    </div>
    <div class="white" v-show="info.buied_status == '2'">
      <div class="goods-all">
        <span class="all-title">物流公司</span>
        <span class="all-price">{{info.pack_company}}</span>
      </div>
      <div class="goods-all">
        <span class="all-title">物流单号</span>
        <span class="all-price">{{info.pack_id}}</span>
      </div>
    </div>
    <div class="white">
      <div class="goods-all">
        <span class="all-title">价格总计</span>
        <span class="all-price red">￥{{info.total_price}}</span>
      </div>
    </div>
  </div>
</template>

<script>
  import { getOrderDetails } from '@/api/api'
  import { formatDate } from '@/util/date'
  export default {
    components: {
    },
    filters: {
      formatDate(time) {
        if(!time){return;}
        let date = new Date(time*1000);
        return formatDate(date, 'yyyy.MM.dd hh:mm');
      }
    },
    data () {
      return {
        goods: [],
        info: {},
      }
    },
    created () {
      this.uid = sessionStorage.getItem('uid');
      this.order_id = this.$route.query.order_id;
      this.get_order_details();
    },
    methods: {
      router (path) {
        this.$router.push(path)
      },
      get_order_details() {
        getOrderDetails(this.uid, this.order_id).then((res) => {
          console.log(res)
          this.goods = res.data.info
          this.info = res.data.url
        }).catch((err) => {
          console.dir(err)
        })
      }
    }
  }
</script>

<style lang="stylus" scoped>
.goods-order-details
  width 100%
  min-height 100vh
  overflow hidden
  background-color #f5f5f5
  .top
    line-height 5rem
    padding-left 1.6rem
    color #333
    background-color #fff
    margin-bottom 1rem
    font-size 1.7rem
    font-weight bold
  .item
    background-color #fff
    position relative
    margin-bottom 1rem
    padding 0 1.5rem
    .bolang
      position absolute
      width 100%
      bottom -.3rem
      left 0
    .goods
      display flex
      background-color #fff
      padding 1rem 0
      border-bottom 1px solid #e6e6e6
      .img
        width 12rem
        height 12rem
        margin-right 1.4rem
        img
          height 12rem
          object-fit cover
      .title
        position relative
        .tip
          font-size 1.5rem
          color #333
          width calc(100vw - 17rem)
          overflow hidden
          text-overflow ellipsis
          display -webkit-box
          -webkit-line-clamp 2
          -webkit-box-orient vertical
        .attr
          margin-top 1rem
          color #999
          font-size 1.2rem
        .price
          color #666
          font-size 1.7rem
          line-height 2.4rem
          position absolute
          bottom 0
          font-weight bold
          overflow hidden
          width 100%
          span
            float right
            line-height 2.4rem
      .num
        flex 1
        text-align right
        line-height 2.1rem
        font-size 1.5rem
        font-weight 500
    .address
      color #2F2F33
      font-size 1.3rem
      padding 1.7rem 0
      line-height 1.7rem
  .white
    background-color #fff
    .goods-all
      background-color #fff
      line-height 5rem
      height 5rem
      display flex
      font-size 1.5rem
      padding-right 1.5rem
      margin-left 1.5rem
      border-bottom 1px solid #e5e5e5
      &:last-child
        margin-bottom 1rem
        border none
      .all-title
        flex 1
        text-align left
        color #8D8D99
      .all-price
        flex 1
        text-align right
        color #2F2F33
        font-weight 500
        position relative
      .all-price.red
        color #43A047
</style>
